<template>
  <div class="swiper">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img :src="imgUrl" alt="" />
        </div>
        <div class="swiper-slide">
          <img :src="imgUrl" alt="" />
        </div>
        <div class="swiper-slide">
          <img :src="imgUrl" alt="" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";

export default {
  props:['type','imgUrl'],
  data() {
    return {};
  },
  mounted() {
    new Swiper(".swiper-container", {
      direction: "horizontal", // 垂直切换选项

      autoplay: {
        //自动开始
        delay: 2500, //时间间隔
        disableOnInteraction: false, //*手动操作轮播图后不会暂停*
      },
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true, // 分页器可以点击
        type: this.type,
        
        
      },
    });
  },
};
</script>

<style scoped >
img {
  width: 100%;
}
.swiper {
}
.swiper-container {
  width: 100vw;
  height: 4.9756rem;
}
</style>